﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ProductList.aspx.cs" Inherits="famails.BackEnd.Customer.ProductList" MasterPageFile="~/Master.Master" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div style="width: 100%; padding: 10px;">
        <!--start content 01-->
        <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="border: 1px solid #333; margin-bottom: 10px; padding: 0px;">
            <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="padding: 10px 20px; background: #000; color: #fff; font-size: 18px; font-weight: bold; position: relative;">
                Danh sách sản phẩm
            </div>
            <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="height: auto;">
                <asp:Panel Visible="false" ID="pnError" runat="server">
                    <div class="error-box round col-md-12 col-xs-12 col-sm-12 col-lg-12" style="padding-top: 10px;">
                        <asp:Label ID="lblError" runat="server" Text=""></asp:Label>
                    </div>
                </asp:Panel>
                <asp:Panel Visible="false" ID="pnSuccess" runat="server">
                    <div class="confirmation-box round col-md-12 col-xs-12 col-sm-12 col-lg-12" style="padding-top: 10px;">
                        <asp:Label ID="lblSuccess" runat="server" Text=""></asp:Label>
                    </div>
                </asp:Panel>
            </div>
            <style>
                #contentjqxgrid {
                    width: 100% !important;
                }

                #pagerjqxgrid {
                    width: 100% !important;
                }

                #columntablejqxgrid {
                    width: 100% !important;
                }

                .jqx-grid-header {
                    width: 100% !important;
                }
                #dropDownButtonContentdropDownButton {
                    margin-top:-3px !important;
                }
            </style>
            <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="height: auto; padding: 10px;">
                <asp:Panel ID="Panel1" runat="server">
                    <fieldset style="padding: 5px 0px;" id="pnSearch">
                        <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12" style="padding: 5px; margin-bottom: 25px;">
                            <span for="simple-input" style="padding: 5px 10px; border: 1px solid #333; font-weight: bolder; font-size: 18px; text-transform: none"><span style="margin-right: 5px" class="fa fa-search"></span>Tìm kiếm sản phẩm</span>
                        </div>
                        <%--<asp:ScriptManager runat="server"></asp:ScriptManager>
                        <asp:UpdatePanel runat="server">
                            <ContentTemplate>--%>
                                <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12" style="padding: 0px; padding-left: 0px;">
                                    <div class="col-md-2 col-lg-2 col-sm-6 col-xs-6" style="padding: 5px; line-height: 30px;">Theo mã</div>
                                    <div class="col-md-4 col-lg-4 col-sm-6 col-xs-6" style="padding: 5px;">
                                        <asp:TextBox runat="server" CssClass="form-control" Style="border-radius: 0px; border: 1px solid #333;" ID="txtCode"></asp:TextBox>
                                    </div>
                                    <div class="col-md-2 col-lg-2 col-sm-6 col-xs-6" style="padding: 5px; line-height: 30px;">Theo tên</div>
                                    <div class="col-md-4 col-lg-4 col-sm-6 col-xs-6" style="padding: 5px;">
                                        <asp:TextBox runat="server" CssClass="form-control" Style="border-radius: 0px; border: 1px solid #333;" ID="txtName"></asp:TextBox>
                                    </div>
                                    <div class="col-md-2 col-lg-2 col-sm-6 col-xs-6" style="padding: 5px; line-height: 30px;">Giá từ</div>
                                    <div class="col-md-4 col-lg-4 col-sm-6 col-xs-6" style="padding: 5px;">
                                        <div id="txtPriceFrom" class="form-control" style="border-radius:0px;border:1px solid #333;"></div>
                                    </div>
                                    <div class="col-md-2 col-lg-2 col-sm-6 col-xs-6" style="padding: 5px; line-height: 30px;">Đến</div>
                                    <div class="col-md-4 col-lg-4 col-sm-6 col-xs-6" style="padding: 5px;">
                                        <div id="txtPriceTo" class="form-control" style="border-radius:0px;border:1px solid #333;"></div>
                                    </div>
                                    <div class="col-md-2 col-lg-2 col-sm-6 col-xs-6" style="padding: 5px; line-height: 30px;">Nhóm sản phẩm</div>
                                    <div class="col-md-3 col-lg-2 col-sm-6 col-xs-6" style="padding: 5px;">
                                        <div id="dropDownButton" class="form-control" style="background: #fff; color: #333; border: 1px solid #333; border-radius: 0px; height: 32px;">

                                            <div id="jqxTree">
                                            </div>
                                        </div>
                                    </div>                                    
                                    <div class="col-md-2 col-lg-2 col-sm-6 col-xs-6" style="padding: 5px; line-height: 30px;">Ngày tạo từ</div>
                                    <div class="col-md-2 col-lg-2 col-sm-6 col-xs-6" style="padding: 5px;height:40px;">
                                        <div id="txtFromDate"></div>
                                    </div>
                                    <div class="col-md-1 col-lg-2 col-sm-6 col-xs-6" style="padding: 5px; padding-right:0px;line-height: 30px;">Đến ngày</div>
                                    <div class="col-md-2 col-lg-2 col-sm-6 col-xs-6" style="padding: 5px;">
                                        <div id="txtToDate"></div>
                                    </div>
                                    <div class="col-sm-12 col-xs-12 col-md-12 col-lg-12" style="padding:0px;">
                                <div id="btnSearch" style="float: left; background: #333; color: #fff; text-align: center; padding: 6px 15px; border-radius: 0px; border: 1px solid #fff;" class="btn col-xs-6 col-lg-2 col-sm-3 col-md-2">
                                    <span class="fa fa-desktop" style="margin-right: 10px;"></span>Lọc dữ liệu 
                                </div>
                                <div id="btnExportExcel" style="float: left; background: #333; color: #fff; text-align: center; padding: 6px 15px; border-radius: 0px; border: 1px solid #fff;" class="btn col-xs-6 col-lg-2 col-sm-3 col-md-2">
                                    <span class="fa fa-mail-forward" style="margin-right: 10px;"></span>Xuất dữ liệu 
                                </div>
                                <a href="Products.aspx" style="float: left; margin-right: 10px; background: #333; color: #fff; text-align: center; padding: 6px 15px; border-radius: 0px; border: 1px solid #fff;" class="btn col-xs-12 col-lg-2 col-sm-3 col-md-3"><span class="fa fa-plus" style="margin-right: 10px;"></span>Thêm mới sản phẩm</a>
                                    </div>
                                </div>
                            <%--</ContentTemplate>
                        </asp:UpdatePanel>--%>
                    </fieldset>
                </asp:Panel>

            </div>

            <div class="col-sm-12 col-xs-12 col-md-12 col-lg-12 " style="padding: 0px;">
                <div id="jqxgrid" style="width: 100% !important;"></div>
                <input type="hidden" name="groupid" id="groupid" value="-1" />
            </div>

            <div id="popupWindow">
                <div>
                    Xóa sản phẩm
                </div>
                <div style="overflow: hidden;">
                    <p>
                        Bạn có chắc là muốn xóa sản phẩm này không?
                    </p>
                    <button id="del">
                        Yes</button>
                    <button id="cancel">
                        No</button>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        jQuery(function ($) {

            $("#txtFromDate").jqxDateTimeInput({ width:'120px', height: '25px' });
            $("#txtToDate").jqxDateTimeInput({ width: '120px', height: '25px' });

            $("#txtPriceFrom").jqxNumberInput({ height: '34x', value: 0, max: 100000000000, digits: 12, min: 0 });
            $("#txtPriceTo").jqxNumberInput({ height: '34x', value: 0, max: 100000000000, digits: 12, min: 0 });

            $("#btnExportExcel").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'xls', 'customerlist');
            });

            $("#btnSearch").click(function () {
                var url = "ProductList.aspx/Search";
                $("#jqxgrid").jqxGrid('showloadelement');
                var postValue = "{name:'" + $('#ContentPlaceHolder1_txtName').val() + "',code:'" + $('#ContentPlaceHolder1_txtCode').val() + "',groupid:" + $('#groupid').val() + ", from:'" + $('#txtFromDate').val() + "', to:'" + $('#txtToDate').val() + "', pfrom:" + $('#txtPriceFrom').val() + ", pto:" + $('#txtPriceTo').val() + "}";
                //alert(postValue);
                $.ajax({
                    type: "POST",
                    url: url,
                    data: postValue,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'ProductID', type: 'decimal' },
                        { name: 'ProductCode', type: 'string' },
                        { name: 'ProductName', type: 'string' },
                        { name: 'GroupName', type: 'string' },
                          { name: 'Price', type: 'decimal' },
                          { name: 'CreateDate', type: 'date' }
                    ],
                    id: 'ProductID',
                    localdata: data,
                    pager: function (pagenum, pagesize, oldpagenum) {
                    }
                };
                        var dataAdapter = new $.jqx.dataAdapter(source);
                        $("#jqxgrid").jqxGrid(
                        {
                            width: $('#jqxgrid').width(),
                            source: dataAdapter,
                            selectionmode: 'multiplerowsextended',
                            sortable: true,
                            pageable: true,
                            autoheight: true,
                            columnsresize: true,
                            scrollmode: 'logical',
                            columns: [
                              { text: 'Mã sản phẩm', datafield: 'ProductCode' },
                              { text: 'Tên sản phẩm', datafield: 'ProductName' },
                              { text: 'Nhóm sản phẩm', datafield: 'GroupName' },
                              { text: 'Giá', datafield: 'Price', width: 100, cellsformat: 'number', cellsalign: 'right' },
                              { text: 'Ngày nhập', datafield: 'CreateDate', width: 100, cellsformat: 'dd/MM/yyyy', cellsalign: 'center' },
                              {
                                  text: 'Chỉnh sửa', datafield: 'Edit', columntype: 'button', width: 90, cellsrenderer: function () {
                                      return "Chỉnh sửa";
                                      //return '<input type="image" style="margin-left: 5px;" height="30" width="30" src="../resource/images/delete-icon.png"/>';
                                  }, buttonclick: function (row) {
                                      editrowindex = row;
                                      var id = $("#jqxgrid").jqxGrid('getcellvalue', row, "ProductID");
                                      window.location = 'Products.aspx?Id=' + id;
                                  }
                              },
                               {
                                   text: 'Xóa', datafield: 'Delete', columntype: 'button', width: 50, cellsrenderer: function () {
                                       return "Xóa";
                                   }, buttonclick: function (row) {
                                       // open the popup window when the user clicks a button.
                                       id = $("#jqxgrid").jqxGrid('getrowid', row);
                                       var offset = $("#jqxgrid").offset();
                                       $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });
                                       // show the popup window.
                                       $("#popupWindow").jqxWindow('show');
                                   }
                               }]
                        });

                    }
                });
            });
            $("#popupWindow").jqxWindow({ width: 250, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01 });
            $("#del").jqxButton({ theme: theme });
            $("#cancel").jqxButton({ theme: theme });
            $("#del").click(function () {
                $.ajax({
                    type: "POST",
                    url: "ProductList.aspx/Delete",
                    data: "{id:" + id + "}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        $('#jqxgrid').jqxGrid('deleterow', id);
                        $("#popupWindow").jqxWindow('hide');
                    },
                    error: function (request, status, error) {
                        alert('Sản phẩm này đã được mua hàng, bạn không thể xóa!');
                        $("#popupWindow").jqxWindow('hide');
                    }
                });
            });
            $("#cancel").click(function () {
                $("#popupWindow").jqxWindow('hide');
            });
            loadProductGroup();
            function loadProductGroup() {
                $.ajax({
                    type: "POST",
                    url: "ProductList.aspx/LoadTree",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        if (data.d != undefined) {
                            var html = "<ul>";
                            $.each(data.d, function (i, item) {
                                if (item.ProductGroupName != undefined) {
                                    if (i == 0) html += "<li  item-selected='true' item-expanded='true' item-value='" + item.ProductGroupID + "'>" + item.ProductGroupName;
                                    else html += "<li item-expanded='true' item-value='" + item.ProductGroupID + "'>" + item.ProductGroupName;
                                    //alert(item.children.count);
                                    if (item.children != "") {
                                        html += "<ul>";
                                        html += getChild(item.children);
                                        html += "</ul>";
                                    }
                                    html += "</li>";
                                }
                            });
                            html += "</ul>";
                        }
                        //alert(html);
                        $("#jqxTree").append(html);
                        $("#dropDownButton").jqxDropDownButton({ width: 100, height: 20 });
                        $('#jqxTree').on('select', function (event) {
                            var args = event.args;
                            var item = $('#jqxTree').jqxTree('getItem', args.element);
                            $("#groupid").val(item.value);
                            //alert(item.value);
                            var dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' + item.label + '</div>';
                            $("#dropDownButton").jqxDropDownButton('setContent', dropDownContent);
                        });
                        $("#jqxTree").jqxTree({ width: 200, height: 220 });
                    }
                });
            }
            function getChild(child) {
                var html = "";
                if (child != "") {
                    $.each(child, function (i, item) {
                        html += "<li item-expanded='true' item-value='" + item.ProductGroupID + "'>" + item.ProductGroupName;
                        if (item.children != "") {
                            html += "<ul>";
                            html += getChild(item.children);
                            html += "</ul>";
                        }
                        html += "</li>";
                    });
                }
                return html;
            }
            $('#btnSearch').trigger('click');
        });
    </script>
</asp:Content>
